import MultipleTag from '@/components/MultipleTag';
import { trimAllBlank } from '@/utils/tools';
import { Col, Divider, Form, Input, Row, message } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import ResultTags from './ResultTags';
import styles from './TextTagsForm.less';
import type { DataProps, ResultDataProps } from './index';

export interface OptionProps {
  label_category?: string;
  list?: string[];
}

export interface Props {
  type?: number | string;
  list?: OptionProps[];
  data?: DataProps;
  title?: string;
  resultList?: string[];
  totalData?: ResultDataProps[];
  maxTagCount?: number;
  onDelete?: (type: number | string, element: string) => void;
  onValuesChange?: (changedValues: any, values: any) => void;
  handlePressEnter?: (values: string) => void;
  min: number;
  max: number;
  require: boolean;
}

/**
 * 文字标签模块
 */
const TextTagsForm: React.FC<Props> = (props) => {
  const {
    list,
    onDelete,
    type = 1,
    resultList,
    title,
    maxTagCount = 3,
    onValuesChange,
    data,
    handlePressEnter,
    min = 1,
    max,
    require = true,
  } = props;

  const formRef = useRef<any>(null);
  const [inputValue, setInputValue] = useState<string>('');
  const [option, setOption] = useState<OptionProps[]>([]);
  const formItemLayout = { labelCol: { span: 3 }, wrapperCol: { span: 21 } };

  const inputChange = (e: any) => {
    setInputValue(trimAllBlank(e.target.value));
  };
  const onPressEnter = () => {
    if (inputValue.length > max || inputValue.length < min) {
      message.error(`单标签仅支持 ${min}-${max} 字`);
      return;
    }
    if (handlePressEnter) handlePressEnter(inputValue);
    setInputValue('');
  };

  useEffect(() => {
    if (list) {
      const newList = list.map((item: OptionProps, index: number) => {
        return { ...item, id: index };
      });
      setOption(newList);
    }
  }, [list]);

  useEffect(() => {
    if (data) {
      formRef?.current.setFieldsValue(data);
    }
  }, [data]);

  return (
    <div>
      <>
        <Row style={{ marginBottom: '30px' }}>
          <Col span={3}>自定义: </Col>
          <Col span={21}>
            <Input
              placeholder={`请输入自定义标签文案，按回车键生成标签，单标签 ${min}-${max} 字`}
              onPressEnter={onPressEnter}
              onChange={inputChange}
              value={inputValue}
              maxLength={max}
              key={'self_tags'}
            />
          </Col>
        </Row>
        <Form
          ref={formRef}
          onValuesChange={(changedValues: any, values: any) => {
            if (onValuesChange) onValuesChange(changedValues, values);
          }}
          {...formItemLayout}
          labelAlign="left"
          className={styles['c-base-tag-form']}
          size="small"
        >
          {option &&
            option.length &&
            option.map((itemChild: any) => {
              return (
                <Form.Item
                  label={itemChild.label_category}
                  name={`label_category_${type}_${itemChild.id}`}
                  key={itemChild.label_category}
                  initialValue={
                    data && data[`label_category_${type}_${itemChild.id}`]
                  }
                >
                  <MultipleTag list={itemChild.list} />
                </Form.Item>
              );
            })}
        </Form>
      </>
      <Divider />
      <div className={styles['c-base-tag-result']}>
        <p>
          {title}:{' '}
          <span
            style={{
              color:
                (resultList?.length || 0) > maxTagCount ||
                (require &&
                  (!resultList || (resultList && resultList.length === 0)))
                  ? '#ff4d4f'
                  : 'rgba(0, 0, 0, 0.85)',
            }}
          >
            {resultList?.length || 0}
          </span>
          /{maxTagCount}
        </p>
        <ResultTags list={resultList} type={type} onDelete={onDelete} />
      </div>
    </div>
  );
};

export default TextTagsForm;
